/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 22.01.2014, 10:28:59
    Author     : dmitryy
*/

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}

header {
    height: 50px;
    background-color: #5b52b4;
}

#content {
    height: 600px;
    width: 960px;
    margin: 0 auto;
    overflow: scroll;
}

.dev {
    margin: 0 auto;
}

.row {

}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

.row:after,.content:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

#dev1 {
    background: url('../imgs/1.jpg');
    width: 441px;
    height: 203px;
    
}

#dev2 {
    background: url('../imgs/2.jpg');
    width: 441px;
    height: 306px;
}

#dev3 {
    background: url('../imgs/3a.jpg');
    width: 411px;
    height: 713px;
}

#dev5 {
    background: url('../imgs/5.jpg');
    width: 448px;
    height: 475px;
}

#dev6 {
    background: url('../imgs/6.jpg');
    width: 707px;
    height: 182px;
}

.switchButton {
    border: 2px solid red;
    position: relative;
}

.switchButton:hover {
    border-color: yellowgreen;
    cursor: pointer;
}

#dev1SwitchButton {
    width: 30px;
    height: 15px;
    top: 65px;
    left: 15px;
}

#dev3SwitchButton {
   width: 24px;
   height: 22px;
   top: 248px;
   left: 86px;
}

#dev5aSwitchButton {
   width: 30px;
   height: 15px;
   top: 337px;
   left: 81px;
}

#dev5bSwitchButton {
   width: 30px;
   height: 15px;
   top: 318px;
   left: 307px;
}

#dev6SwitchButton {
    width: 24px;
    height: 13px;
    top: 139px;
    left: 648px;
}